/** 场景集合及资产页面 */
import * as React from 'react';
import './OperationalInformation.scss/';
import { EditorModels } from '../../ts/EditorModels';
import * as THREE from 'three';
import classNames from 'classnames';
import Loading from '../commonCompents/EditorLoading/EditorLoading';
import EditorNoData from '../commonCompents/EditorNoData/EditorNoData';
import { Tooltip } from 'antd';
import EditorRemoveObjectCommands from '../../ts/commands/EditorRemoveObjectCommands';
import { EnumEditorCommandType } from '../../ts/commands/EditorCommands';
export interface IOperationalInformationProps {
  editorScene: EditorModels;
}
interface IConfig3D {
  cnName: string;
  name: string;
  iconFontClass: string;
  iconComponent: (props: React.HTMLProps<HTMLDivElement>) => JSX.Element;
  component: JSX.Element;
}
const EditorAssect = React.lazy(() => import('./EditorAssectComponent/EditorAssect'));
const EditorMaterial = React.lazy(() => import('./EditorMaterialComponet/EditorMaterial'));
const EditorCamera = React.lazy(() => import('./EditorCameraComponent/EditorCamera'));
const EditorTextureMapping = React.lazy(
  () => import('./EditorTextureMappingComponent/EditorTextureMapping'),
);
const EditorLightComponent = React.lazy(
  () => import('./EditorLightComponent/EditorLightComponent'),
);
export function OperationalInformation(props: IOperationalInformationProps) {
  const { sceneMoveObject3DList, selectMeshGroup } = props.editorScene;
  /** 3D相关配置列表 */
  const config3DList: IConfig3D[] = [
    {
      cnName: '资产',
      name: 'assect',
      iconFontClass: 'icon-assets',
      iconComponent: (props: React.HTMLProps<HTMLDivElement>) => <span {...props} />,
      component: <EditorAssect {...props} />,
    },
    {
      cnName: '材质',
      name: 'material',
      iconFontClass: 'icon-caizhi',
      iconComponent: (props: React.HTMLProps<HTMLDivElement>) => <span {...props} />,
      component: <EditorMaterial {...props} />,
    },
    {
      cnName: '贴图',
      name: 'textureMapping',
      iconFontClass: 'icon-penRuler',
      iconComponent: (props: React.HTMLProps<HTMLDivElement>) => <span {...props} />,
      component: <EditorTextureMapping {...props} />,
    },
    {
      cnName: '灯光',
      name: 'light',
      iconFontClass: 'icon-dengguang',
      iconComponent: (props: React.HTMLProps<HTMLDivElement>) => <span {...props} />,
      component: <EditorLightComponent {...props} />,
    },
    {
      cnName: '相机',
      name: 'camera',
      iconFontClass: 'icon-zhaoxiangji',
      iconComponent: (props: React.HTMLProps<HTMLDivElement>) => (
        <span {...props} style={{ fontSize: '23px' }} />
      ),
      component: <EditorCamera {...props} />,
    },
  ];
  const [configActive, setConfigActive] = React.useState(config3DList[3].name);
  /** 选中场景中的元素 */
  const selectGroup = (group: THREE.Group) => {
    if (!group.visible) return;
    const { editorScene } = props;
    editorScene.selectMeshGroupFunction(group);
  };
  /** 改变眼睛的状态 */
  const changeEye = (
    e: React.MouseEvent<Element, MouseEvent>,
    group: THREE.Group,
    visible: boolean,
  ) => {
    e.stopPropagation();
    /** transform控制器和模型同步显示隐藏 */
    if (props.editorScene.selectMeshGroup === group) {
      props.editorScene.transformControls.visible = visible;
    }
    group.visible = visible;
    props.editorScene.updateView();
  };
  /** 删除组 */
  const deletGroup = (e: React.MouseEvent<Element, MouseEvent>, group: THREE.Group) => {
    e.stopPropagation();
    if (props.editorScene.selectMeshGroup === group) {
      props.editorScene.transformControls.detach();
    }
    props.editorScene.disposeGroup(group);
    props.editorScene.sceneMoveObject3DList = props.editorScene.sceneMoveObject3DList.filter(
      (item) => item !== group,
    );
    props.editorScene.histroy.execute(
      new EditorRemoveObjectCommands({
        editor: props.editorScene,
        object: group,
      }),
      EnumEditorCommandType.RemoveObjectCommand,
    );
    props.editorScene.updateView();
  };

  return (
    <div className="operationalInformation">
      <div className="sceneList">
        <div className="title">
          <span className="iconfont icon-jihe"></span>
          场景集合
        </div>
        <div className="scroll">
          {sceneMoveObject3DList.length === 0 ? (
            <EditorNoData description="暂无场景集合"></EditorNoData>
          ) : (
            sceneMoveObject3DList.map((item) => {
              return (
                <div
                  className={classNames('item', {
                    active: item.uuid === selectMeshGroup?.uuid,
                  })}
                  key={item.uuid}
                  onClick={() => selectGroup(item)}
                >
                  <div className="name">{item.name} </div>
                  <div className="operation">
                    {item.visible && (
                      <span
                        className="iconfont icon-yanjing"
                        onClick={(e: React.MouseEvent<Element, MouseEvent>) => {
                          changeEye(e, item, false);
                        }}
                      ></span>
                    )}
                    {!item.visible && (
                      <span
                        className="iconfont icon-yanjing_yincang_o"
                        onClick={(e: React.MouseEvent<Element, MouseEvent>) => {
                          changeEye(e, item, true);
                        }}
                      ></span>
                    )}
                    <span
                      className="iconfont icon-shanchu"
                      onClick={(e: React.MouseEvent<Element, MouseEvent>) => {
                        deletGroup(e, item);
                      }}
                    ></span>
                  </div>
                </div>
              );
            })
          )}
        </div>
      </div>

      {/* 下方的资产，集合，材质等页面 */}
      <div className="property">
        <div className="left">
          {config3DList.map((item) => {
            return (
              <div
                className="item"
                key={item.name}
                onClick={() => {
                  setConfigActive(item.name);
                }}
              >
                <Tooltip title={item.cnName} placement="left">
                  {item.iconComponent({
                    className: classNames({
                      [item.iconFontClass]: true,
                      iconfont: true,
                      active: item.name === configActive,
                    }),
                  })}
                </Tooltip>
              </div>
            );
          })}
        </div>
        <div className="content">
          <React.Suspense fallback={<Loading></Loading>}>
            {config3DList.find((item) => item.name === configActive)!.component}
          </React.Suspense>
        </div>
      </div>
    </div>
  );
}
